<template>
    <div class="cupboard">
        <top-timer/>
        <p class="font_M font_40 col_333 title center">请选择适合箱格类型</p>
        <p class="font_M font_30 col_999 tips center">未避免浪费，请选择适合的箱格类型</p>
        <div class="flex center select_list">
            <div class="flex1 flex align_center" :class="actBtn === '01'? 'act_btn' : ''" @click="actBtn = '01';">
                <img src="@/assets/img/guagui_icon.png" width="80" height="80" alt="">
                <p class="font_40 col_666 type_name">挂柜</p>
                <p class="font_40 col_666">5～10件</p>
            </div>
            <div class="flex1 flex align_center" :class="actBtn === '04'? 'act_btn' : ''" @click="actBtn = '04';">
                <img src="@/assets/img/biggui_icon.png" width="80" height="80" alt="">
                <p class="font_40 col_666 type_name">大号柜</p>
                <p class="font_40 col_666">5～10件</p>
            </div>
            <div class="flex1 flex align_center" :class="actBtn === '02'? 'act_btn' : ''" @click="actBtn = '02';">
                <img src="@/assets/img/diegui_icon.png" width="80" height="80" alt="">
                <p class="font_40 col_666 type_name">叠柜</p>
                <p class="font_40 col_666">5～10件</p>
            </div>
            <div class="flex1 flex align_center" :class="actBtn === '03'? 'act_btn' : ''" @click="actBtn = '03';">
                <img src="@/assets/img/xiegui_icon.png" width="80" height="80" alt="">
                <p class="font_40 col_666 type_name">鞋柜</p>
                <p class="font_40 col_666">5～10件</p>
            </div>
        </div>
        <el-button type="primary" class="col_fff font_M" @click="handleOpenDoor()">确认</el-button>
        <el-dialog
                :modal="false"
                :close-on-click-modal="false"
                :show-close="false"
                :visible.sync="dialogVisible"
                width="340rem">
            <div class="dialog_content center font_M font_40 col_666">
                <img src="@/assets/img/error_icon.png" alt="">
                <p>该尺寸的柜子已满</p>
                <p>请选择其他尺寸的</p>
                <el-button type="primary" class="col_fff" @click="handleBack()">知道了</el-button>
            </div>
        </el-dialog>
        <top-tips/>
    </div>
</template>

<script>
  export default {
    name: 'delivery-cupboard',
    data() {
      return {
        dialogVisible: false,
        actBtn: '01',
      };
    },
    methods: {
      handleBack() {
        this.dialogVisible = !this.dialogVisible;
      },
      handleOpenDoor() {
        // this.dialogVisible = !this.dialogVisible;
        this.$axios.get('deliveryRest/openBoxByBoxType', {
          params: {boxType: this.actBtn},
        }).then(res => {
          if (res.data.result) {
            let obj = res.data.obj;
            let boxCode = obj.boxCode;
            let success = () => {
              this.$axios.post('deliveryRest/openSuccessByBoxType', {
                boxCode: boxCode,
              }).then(() => {
                this.$router.push(
                  {path: '/deliveryOpenCupboard', query: {boxCode: obj.boxCode, boxDetailId: obj.boxDetailId}});
              });
            };
            let error = () => {
              this.$alert('开箱失败，请联系客服，联系方式见屏幕下方！');
            };
            let boxMac = this.$boxConfig[boxCode];
            window.cordova.plugins.CabinetPlugin.sendOpenBoxCommand(boxMac, success, error);
          } else {
            this.$alert(res.data.msg, '开箱错误');
          }
        });

      },
    },
  };
</script>

<style lang="scss">
    .cupboard {
        position: relative;

        .el-dialog__wrapper {
            position: absolute;
        }

        .el-dialog {
            border-radius: 0.16rem;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            margin: 0 !important;
        }

        .dialog_content {
            padding: 1.00rem 0rem;

            img {
                margin: 0 0 0.60rem;
            }

            button {
                background-color: #0A82EC;
                margin-top: 0.80rem;
                width: 2.40rem;
                height: 0.80rem;
                font-size: 0.40rem;
                border-radius: 0.50rem;
            }
        }

        .title {
            margin: 0.40rem 0 0.20rem;
        }

        .tips {
            margin-bottom: 0.40rem;
        }

        .select_list {
            margin: 0 0.80rem 1.95rem;
            justify-content: space-between;
            flex-wrap: wrap;

            .flex1 {
                justify-content: center;
                flex-direction: column;
                height: 4.00rem;
                flex: 0 0 2.00rem;
            }

            .type_name {
                margin: 0.30rem 0 0.20rem;
            }

            .act_btn {
                background: rgba(255, 255, 255, 1);
                box-shadow: 0.02rem 0.02rem 0.20rem 0rem rgba(10, 130, 236, 0.2);
                border-radius: 0.24rem;
                border: 0.03rem solid rgba(10, 130, 236, 1);
            }
        }

        button {
            display: block;
            width: calc(100% - 1.60rem);
            margin: 0 auto;
            height: 1.20rem;
            font-size: 0.50rem;
            border-radius: 0.70rem;
            background-color: #0A82EC;
        }
    }
</style>